<template>
  <el-card>
    <el-table  style="width: 100%" border stripe :data="dataList">
      <el-table-column width="60" type="index" label="顺序" />
      <el-table-column prop="title" label="标题" />
      <el-table-column prop="fee" label="价格" />
      <el-table-column prop="mark" label="等级" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            @click="edit(scope.row)"
            >编辑</el-button
          >
          <!-- <el-button
            type="danger"
            size="small"
            @click="del(scope.row)"
            >删除</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>
    <EditModal @getList="getList()" :visible="editModalVisible" :editData="editData" @toggleModal="(value) => editModalVisible=value"/>
  </el-card>
</template>
<script>
import { getVipList,delVipList } from '@/api/user/vip'
import EditModal from './editModal/index'
export default {
  components:{EditModal},
  data(){
    return {
      dataList:[],
      editData: null,
      editModalVisible: false
    }
  },
  mounted(){
    this.getList();
  },
  methods: {
    getList(){
      getVipList().then(data => {
        this.dataList = data.data;
      })
    },
    edit(item){
      this.editData = item;
      this.editModalVisible=true;
    },
    del(item){
      this.$confirm("是否确认删除, 是否继续？","提示").then(async () => {
        delVipList({id: item.id}).then(() => {
          this.getList();
        })
      })
      
    }
  }
}
</script>
